<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3图片悬停放大</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.wrapbox{
			width: 600px;
			height: 600px;
			margin: 50px auto;
		}
		.wrapbox li{
			width: 180px;
			height: 180px;
			float: left;
			list-style: none; //清除列表样式
		}
		.wrapbox li img{
			width: 140px;
			height: 140px;
			transition: 550ms ease;		/*设置时间*/
			box-shadow: 0px 0px 10px rgba(0,0,0,1.65);		/*左右0px 上下10px*/
		}
		.wrapbox li img:hover{
			transform: scale(2.0);		/*设置缩放*/
			border-radius: 30%;	/*设置圆角*/
			box-shadow: 0px 0px 10px rgba(255,0,0,0.3)
		}

	</style>
</head>
<body>
<div class="wrapbox">
	<ul>
		<li>
			<img src="images/1.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/2.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/3.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/4.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/5.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/6.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/7.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/8.jpg" width="300px" height="300px">
		</li>
		<li>
			<img src="images/9.jpg" width="300px" height="300px">
		</li>
	</ul>
</div>
</body>
</html>